import { __experimentalHStack as HStack, __experimentalText as Text } from '@wordpress/components';

interface TargetDirDisplayProps {
	targetDir: string;
	color?: string;
}

export const TargetDirDisplay = ( { targetDir, color = '#3b3b3b' }: TargetDirDisplayProps ) => {
	let path = targetDir;
	if ( path.length > 1 ) {
		path = path.substring( path.lastIndexOf( '/' ) + 1 );
	}

	return (
		<HStack spacing={ 1 } alignment="left">
			<svg
				width="16"
				height="16"
				viewBox="0 0 16 16"
				fill="none"
				xmlns="http://www.w3.org/2000/svg"
			>
				<path
					fillRule="evenodd"
					clipRule="evenodd"
					d="M8.56533 5.33341C8.43634 5.33343 8.31012 5.29603 8.20197 5.22574C8.09381 5.15545 8.00837 5.05529 7.956 4.93742L7.474 3.85075C7.44629 3.79545 7.40374 3.74895 7.35111 3.71646C7.29848 3.68396 7.23785 3.66675 7.176 3.66675H3.33333C3.24493 3.66675 3.16014 3.70187 3.09763 3.76438C3.03512 3.82689 3 3.91168 3 4.00008V11.6667C3 11.7552 3.03512 11.8399 3.09763 11.9025C3.16014 11.965 3.24493 12.0001 3.33333 12.0001H12.6667C12.7551 12.0001 12.8399 11.965 12.9024 11.9025C12.9649 11.8399 13 11.7552 13 11.6667V5.66675C13 5.57834 12.9649 5.49356 12.9024 5.43105C12.8399 5.36853 12.7551 5.33341 12.6667 5.33341H8.56533ZM8.97333 4.33341C8.9073 4.33335 8.84277 4.31367 8.78793 4.27688C8.7331 4.24008 8.69043 4.18783 8.66533 4.12675L8.36867 3.40408C8.25791 3.18244 8.08759 2.99604 7.8768 2.8658C7.66602 2.73556 7.42311 2.66663 7.17533 2.66675H3.33333C2.97971 2.66675 2.64057 2.80722 2.39052 3.05727C2.14048 3.30732 2 3.64646 2 4.00008V11.6667C2 12.0204 2.14048 12.3595 2.39052 12.6096C2.64057 12.8596 2.97971 13.0001 3.33333 13.0001H12.6667C13.0203 13.0001 13.3594 12.8596 13.6095 12.6096C13.8595 12.3595 14 12.0204 14 11.6667V5.66675C14 5.31313 13.8595 4.97399 13.6095 4.72394C13.3594 4.47389 13.0203 4.33341 12.6667 4.33341H8.97333Z"
					fill={ color }
				/>
			</svg>
			<Text size="small" style={ { color } } title={ targetDir }>
				{ path }
			</Text>
		</HStack>
	);
};
